import { Injectable } from '@angular/core';
import { Router } from '@angular/router';
import {ReplaySubject} from 'rxjs';
import {CBoardEChartRender} from './utils/CBoardEChartRender';

declare var $: any;
import * as echarts from 'echarts';
import Echarts = echarts.Echarts;
import * as _ from 'underscore';
@Injectable()
export class ChartWordcloudService {

    constructor(
      private router: Router
    ) {}
    public render(containerDom, option, scope, persist, drill, relations, chartConfig){
      let render = new CBoardEChartRender(containerDom, option ,'');
      if (option == null) {
        containerDom.html("<div class=\"alert alert-danger\" role=\"alert\">No Data!</div>");
        return;
      }
      var height;
      scope ? height = scope.myheight - 20 : null;
      // render.addClick(chartConfig, relations, $state, $window);
      return render.chart(height, persist);
    }

    public parseOption(data){
      var names = data.keys;
      var values = data.data;

      var datas = [];
      for (var i in names) {
        datas.push({
          name: names[i].join("-"),
          value: values[0][i]
        })
      }

      var option = {
        tooltip: {
          formatter: "{b} : {c}"
        },
        toolbox: {
          show : true,
          feature : {
            mark : {show: false},
            dataView : {show: true, readOnly: true},
            //magicType : {show: true, type: ['line', 'bar']},
            restore : {show: false},
            saveAsImage : {show: true}
          }
        },
        series: [{
          type: 'wordCloud',
          gridSize: 5,
          sizeRange: [12, 50],
          rotationRange: [-90, 90],
          rotationStep: 45,
          shape: 'circle',
          textStyle: {
            normal: {
              color: function() {
                return 'rgb(' + [
                  Math.round(Math.random() * 160),
                  Math.round(Math.random() * 160),
                  Math.round(Math.random() * 160)
                ].join(',') + ')';
              }
            },
            emphasis: {
              shadowBlur: 10,
              shadowColor: '#333'
            }
          },
          data: datas
        }]
      };
      return option;
    }
}
